<template>
	<view>
		<j-cell-group>
			<j-cell title="更改密码" @jftap="openPopup"></j-cell>
		</j-cell-group>
		<uni-popup ref="inputDialog" type="dialog" :is-mask-click="false" class="popupName">
			<view class="form">
				<view class="u-f-ajc title">更改密码</view>
				<view class="form-item">
					<uni-easyinput type="password" v-model="password" placeholder="请输入旧密码"></uni-easyinput>
					<uni-easyinput type="password" v-model="newpass" placeholder="新密码"></uni-easyinput>
					<uni-easyinput type="password" v-model="confirmpass" placeholder="请确认新密码"></uni-easyinput>
				</view>
				<view class="u-f-r form-item">
					<view class="u-f-ajc cancel" @click="close">取消</view>
					<view class="u-f-ajc conf" @click="submit">确认修改</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		XMMD5Encrypt
	} from "@/utils/md5Encrypt.js"
	const isPwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,64}$/;
	export default {
		data() {
			return {
				device: {},
				password: '',
				newpass: '',
				confirmpass: ''
			}
		},
		onLoad(opt) {
			let enData = decodeURIComponent(opt.device)
			this.device = JSON.parse(enData);
			console.log(this.device)
		},
		methods: {
			// 显示修改设备名称弹框
			openPopup() {
				this.$refs.inputDialog.open()
			},
			//关闭弹框
			close() {
				this.$refs.inputDialog.close();
				this.password = ''
				this.newpass = ''
				this.confirmpass = ''
			},
			submit() {
				if (!this.password) {
					return uni.showToast({
						title: '请输入旧密码',
						icon: 'none'
					})
				}
				if (!this.newpass) {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
				}
				if (!this.confirmpass) {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
				}
				if (this.newpass != this.confirmpass) {
					return uni.showToast({
						title: '两次输入密码不一样',
						icon: 'none'
					})
				}
				if (!isPwd.test(this.confirmpass)) {
					return uni.showToast({
						title: '请输入正确密码格式',
						icon: 'none'
					})
				}
				this.setPassWord()
			},
			// 获取设备token
			setPassWord() {
				uni.showLoading({
					title: '加载中'
				})
				let sns = []
				sns[0] = this.device.deviceNo
				const data = {
					sns: sns
				};
				getApp().globalData.api.getDeviceToken(data, (result) => {
					console.log('获取设备token:', result);
					this.deviceLogin(result[0].token)
				});
			},
			// 登录设备
			deviceLogin(token) {
				let data = {
					Name: 'generalinfo',
					UserName: 'admin',
					PassWord: this.device.devPassWord,
					LoginType: 'DVRIP-Web',
					EncryptType: 'DISABLE'
				};
				getApp().globalData.api.deviceLogin(data, token, (result) => {
					console.log(result);
					this.resetPasswords(token)
				});
			},
			// 设置重置设备密码
			resetPasswords(token) {
				let data = {
					Name: 'MODIFYPASSWORD',
					UserName: 'admin',
					PassWord: this.device.devPassWord,
					NewPassWord: XMMD5Encrypt(this.confirmpass),
					EncryptType: 'DISABLE'
				};
				getApp().globalData.api.usermanage(data, token, (result) => {
					uni.hideLoading()
					if (result.Ret === 100) {
						uni.showToast({
							title: '修改密码成功',
							duration: 2000
						});
						let updata = {
							deviceNo: this.device.deviceNo,
							devPassWord: XMMD5Encrypt(this.confirmpass)
						};
						getApp().globalData.api.updateDevice(updata, (result) => {
							console.log(result)
						});
						this.close()
					} else {
						uni.showModal({
							title: '提示',
							content: result.retMsg,
							showCancel: false
						});
					}
				});
			},
			updateDevice() {
				let data = {
					deviceNo: this.deviceNo,
					deviceName: this.deviceName
				};
				getApp().globalData.api.updateDevice(data, (result) => {
					console.log(result)
				});
			},
		}
	}
</script>

<style lang="scss">

    .popupName {
        /deep/ .uni-popup__wrapper {
            top: -100rpx;
        }
    }
	.form {
		background: white;
		padding: 60rpx;
		border-radius: 10rpx;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			line-height: 49rpx;
			color: #464646;
		}

		.form-item {
			margin-top: 40rpx;

			.uni-easyinput {
				margin: 10rpx;
			}

			// input{
			// 	border: 1rpx solid #A5A5A5;
			// 	border-radius: 8rpx;
			// 	padding: 10rpx;
			// }
			.cancel {
				background: #F6F7FB;
				color: #000000;
				font-size: 30rpx;
				width: 237rpx;
				height: 84rpx;
				border-radius: 42rpx;
			}

			.conf {
				margin-left: 20rpx;
				background: #FF0025;
				color: #ffffff;
				font-size: 30rpx;
				width: 237rpx;
				height: 84rpx;
				border-radius: 42rpx;
			}
		}

		.form-title {
			text-align: center;
			margin-bottom: 40rpx;
			font-weight: bold;
		}
	}
</style>
